<template>
  <div>
    <a-upload name="avatar" list-type="picture-card" class="avatar-uploader"
        :fileList="fileList" :multiple='false' :before-upload="beforeUpload"
        :remove="handleRemove" @preview="previewImage">
            <div v-if="fileList.length == 0">
                <a-icon :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text"> 封面上传 </div>
            </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible=false">
      <img alt="example" style="width: 100%" :src="previewImageUrl" />
    </a-modal>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
        previewVisible:false,
        previewImageUrl:"",
        imageUrl: '',
        fileList:[],
        loading:false,
    };
  },
  methods: {
    handleRemove(file){
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
      this.$emit('data',this.fileList);
    },
    beforeUpload(file) {
        const isJpgOrPng = file.type === 'image/jpg' || file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            this.$message.error('只能上传jpg/png的图片哦');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            this.$message.error('图片最大只能上传2MB');
        }
        this.getImg(file);
        return false;
    },
    getImg(v) {
      var reader = new FileReader();
      var newUrl;
      reader.onload = s => {
        var _this = this;
        newUrl = reader.result;
        let obj={
          url:newUrl,
          name:v.name
        }
        v.url=newUrl;
        _this.fileList = [...this.fileList, v];
        this.$emit('data',_this.fileList);
     
      };
      reader.readAsDataURL(v);
    
    },
    previewImage(file){
        this.previewImageUrl = file.url || file.preview;
        this.previewVisible = true;
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
</style>